<template>
  <div>
    <a-row justify="space-between">
      <h1 class="title cartoonFont">推荐歌单</h1>
      <h1 class="cartoonFont p1" @click="onFind">查看全部</h1>
    </a-row>
    <a-row justify="space-between">
      <a-col
        v-for="item in getData"
        :span="4"
        :key="item.id"
        class="cartoontext"
        @click="onSongDetails(item.id)"
      >
        <div class="newSongCol">
          <img :src="item.coverImgUrl" alt="" />
          <p>{{ item.name }}</p>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from "@vue/runtime-core";
import { getresourceStore,getLoginStore} from "../../store";
import { useRouter } from "vue-router";
import { message } from "ant-design-vue";

export default defineComponent({
  name: "app",
  setup() {
    // 调用推荐歌单API
    const getNewSongDataSrore = getresourceStore();
    const getData = ref();
    // 获取cookie状态
    const isLoginStatus = ref(getLoginStore().cookie);
    // 定义路由
    const router = useRouter();
    // 点击全部跳转到发现页
    function onFind(){
      router.push("find");
    }
    // 点击卡片调用函数
    function onSongDetails(songSheetId:number) {
      if (!isLoginStatus.value) {
        message.error("请先登陆");
        // 跳转到登陆页面
        router.push("login");
      } else {
        // 跳转到歌单详情页
        router.push({path:'songSheet',query:{id:songSheetId}});

      }
    }

    onMounted(async () => {
      getData.value = (await getNewSongDataSrore.fetch(5)).data.playlists;
      // console.log('============>re', getData.value);
    });
    return {
      getData,
      onSongDetails,
      onFind
    };
  },
});
</script>

<style lang="less" scoped>
.newSongCol {
  text-align: center;
}
.newSongCol img {
  border: 3px solid black;
  border-radius: 8px;
  width: 290px;
}
.newSongCol img:hover {
  cursor: pointer;
  box-shadow: 6px 6px 3px rgba(0, 0, 0, 0.2);
}
.newSongCol p:hover {
  cursor: pointer;
}
.title {
  margin-left: 1rem;
  font-size: 28px;
}
.p1 {
  font-size: 16px;
  margin-right: 16px;
  color: #444;
}
.p1:hover {
  cursor: pointer;
  color: #000;
}
</style>
